import 'package:enterprise_v6_app/app/core/core.dart';
import 'package:enterprise_v6_app/app/core/ext/ext.dart';

class NewMyColumnarBar extends StatefulWidget {
  const NewMyColumnarBar({
    required this.onCallBack,
    super.key,
    this.width = 30.0,
    this.height = 250.0,
    this.yWidth = 20.0,
    this.yAxis,
    this.color,
    this.yAxisList,
    this.xAxisList,
  });

  final double width, height, yWidth;
  final double? yAxis;
  final List<Color>? color;
  final List<double>? yAxisList;
  final List<MyMultipleXAxisStruct>? xAxisList;

  // 点击回调
  final Function(int index) onCallBack;

  @override
  State<NewMyColumnarBar> createState() => _MyColumnarBarState();
}

class _MyColumnarBarState extends State<NewMyColumnarBar> {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Container(
            margin: EdgeInsets.only(bottom: 16.w),
            constraints: BoxConstraints(minWidth: widget.width),
            height: widget.height + 10.w,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: widget.yAxisList!
                  .map(
                    (item) => Text(
                      item.toInt().toString(),
                      style: TextStyle(color: const Color(0xff3A3B3D), fontSize: 12.sp),
                    ),
                  )
                  .toList(),
            )),
        Expanded(
            child: Stack(
          alignment: Alignment.bottomLeft,
          children: [
            //背景分割线
            Container(
              // color: Colors.blue,
              margin: EdgeInsets.only(left: 9.w, bottom: 20.w),
              child: Row(
                children: [
                  SizedBox(
                    width: 0.4.w,
                    height: widget.height,
                    child: Container(
                      color: const Color(0xff68A8CC).withAlpha(40),
                    ),
                  ),
                  Expanded(
                      child: SizedBox(
                          height: widget.height,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: List.generate(5, (index) {
                              return Container(
                                height: 0.4.w,
                                color: const Color(0xff68A8CC).withAlpha(40),
                              );
                            }).toList(),
                          )))
                ],
              ),
            ),
            Container(
              height: widget.height + 40.w,
              width: double.infinity,
              margin: EdgeInsets.only(left: 15.w),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Container(
                    margin: EdgeInsets.only(right: 20.w),
                    child: MyColumnarClickBar(
                      height: widget.height,
                      yAxisList: widget.yAxisList!,
                      xAxisList: widget.xAxisList!,
                      color: widget.color,
                      index: index,
                      yWidth: widget.yWidth,
                      onCallBack: (index) {
                        widget.onCallBack(index);
                      },
                    ),
                  );
                },
                itemCount: widget.xAxisList!.length,
              ),
            )
          ],
        )),
      ],
    );
  }
}

//x轴显示的view数据
class MyMultipleXAxisStruct {
  MyMultipleXAxisStruct({
    required this.showsTitle,
    String? names,
    List<double>? nums,
    List<Color>? color,
  })  : names = names ?? '',
        color = color ?? [],
        nums = nums ?? [];

  final String names;
  final List<double> nums;
  final List<Color> color;
  RxBool showsTitle = false.obs; //默认
}

//x轴显示的view
class MyColumnarClickBar extends StatefulWidget {
  const MyColumnarClickBar(
      {required this.index, required this.yAxisList, required this.xAxisList, required this.onCallBack, super.key, this.height, this.yWidth, this.color});

  final double? height, yWidth;
  final int index;
  final List<double> yAxisList;
  final List<MyMultipleXAxisStruct> xAxisList;
  final List<Color>? color;

  // 点击回调
  final Function(int index) onCallBack;

  @override
  State<MyColumnarClickBar> createState() => _MyColumnarClickBarState();
}

MyMultipleXAxisStruct? topmultipleXAxisStruct;

class _MyColumnarClickBarState extends State<MyColumnarClickBar> with TickerProviderStateMixin {
  List<double> height = [];
  List<Color> color = [];
  late AnimationController _animationController;
  final List<Animation<double>> _tweenList = [];

  @override
  void dispose() {
    _animationController.stop();
    _animationController.dispose();
    super.dispose();
  }

  _initDate() {
    if (widget.color is List) {
      color = widget.color!;
    }

    bool additionColor = false;
    if (color.length < widget.xAxisList[widget.index].nums.length) {
      additionColor = true;
      color = [];
    }
    //动画控制
    _animationController = AnimationController(vsync: this, duration: const Duration(seconds: 1));
    for (var element in widget.xAxisList[widget.index].nums) {
      final double tempHeight = widget.yAxisList[0] == 0 ? 0 : widget.height! / widget.yAxisList[0] * element;
      height.add(tempHeight);
      _tweenList.add(Tween(begin: 0.0, end: tempHeight).animate(_animationController));
      if (additionColor) {
        color.add(color.length % 2 == 0 ? const Color(0xff649FFF) : const Color(0xffFFA100));
      }
    }
    _animationController.forward();
  }

  @override
  void initState() {
    super.initState();
    if (widget.xAxisList.isNotEmpty) {
      topmultipleXAxisStruct = widget.xAxisList[0];
    }
    _initDate();
  }

  @override
  void didUpdateWidget(covariant MyColumnarClickBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    // _initDate();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      child: Obx(
        () => Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.start,
              children: widget.xAxisList[widget.index].nums.asMap().keys.map<Widget>((i) {
                return Column(
                  children: [
                    // showsTitle
                    //     ? Center(
                    //         child: Text(
                    //           widget.xAxisList[widget.index].nums[i].toString().split('.')[0],
                    //           style: TextStyle(color: const Color(0xff649FFF), fontSize: 10.w, fontWeight: FontWeight.w500),
                    //         ),
                    //       )
                    //     : Container(),
                    Center(
                      child: Text(
                        widget.xAxisList[widget.index].nums[i].toString().split('.')[0],
                        style: TextStyle(
                            color: const Color(0xff649FFF),
                            fontSize: widget.xAxisList[widget.index].showsTitle.value ? 15.w : 10.w,
                            fontWeight: FontWeight.w500),
                      ),
                    ),
                    AnimatedBuilder(
                        animation: _animationController,
                        builder: (context, child) {
                          return Container(
                            margin: EdgeInsets.symmetric(horizontal: 3.w),
                            decoration: BoxDecoration(
                                boxShadow: [
                                  widget.xAxisList[widget.index].showsTitle.value
                                      ? BoxShadow(
                                          color: Colors.red.withOpacity(0.3), // 阴影颜色
                                          // color: const Color(0xffBCBCC5).withOpacity(0.3), // 阴影颜色
                                          offset: const Offset(0, -5), // 阴影的偏移量，向上偏移，即上方阴影
                                          blurRadius: 10.0, // 阴影的模糊半径
                                          spreadRadius: 2.0, // 阴影的扩散半径
                                        )
                                      : const BoxShadow(),
                                ],
                                color: widget.xAxisList[widget.index].color.length > i ? widget.xAxisList[widget.index].color[i] : color[i],
                                borderRadius: BorderRadius.only(topLeft: Radius.circular(2.5.w), topRight: Radius.circular(2.5.w))),
                            height: _tweenList[i].value,
                            width: 12.w,
                          );
                        }),
                  ],
                );
              }).toList(),
            ),
            SizedBox(
              height: 4.w,
            ),
            Container(
              constraints: BoxConstraints(
                minWidth: 50.w,
              ),
              alignment: Alignment.center,
              child: Text(widget.xAxisList[widget.index].names.toString(), style: TextStyle(fontSize: 12.w), maxLines: 1, overflow: TextOverflow.ellipsis),
            )
          ],
        ).clickOnce(() {
          if (mounted) {
            //只有选中的状态显示 其余的回归
            // for (var value in widget.xAxisList) {
            if (topmultipleXAxisStruct != null && topmultipleXAxisStruct != widget.xAxisList[widget.index]) {
              topmultipleXAxisStruct?.showsTitle.value = false;
            }
            widget.xAxisList[widget.index].showsTitle.value = !widget.xAxisList[widget.index].showsTitle.value;
            widget.onCallBack(widget.index);
            //上一个对象
            topmultipleXAxisStruct = widget.xAxisList[widget.index];
            // if (mounted) {
            //   setState(() {});
            // }
            // setState(() {});
          }
        }),
      ),
    );
  }
}

class NewColumnarBar {
  // 显示柱状图
  static Widget columnarBar({
    required double yAxis,
    required List<MyMultipleXAxisStruct> xAxisList,
    required final Function(int index) onCallBack,
    double height = 250,
    double width = 30,
    List<Color>? color,
    double yWidth = 20,
  }) {
    final List<double> yAxisList = [];
    final int xNum = (yAxis / 4).ceil().toInt();
    for (var i = 4; i > -1; i--) {
      yAxisList.add((xNum * i).toDouble());
    }
    return NewMyColumnarBar(
      width: width,
      height: height,
      yAxis: yAxis,
      xAxisList: xAxisList,
      color: color,
      yWidth: yWidth,
      yAxisList: yAxisList,
      onCallBack: onCallBack,
    );
  }
}
